<!DOCTYPE html>
<html>
  <head>
    <title>GeoJSON tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="sample-geojson.js" type="text/javascript"></script>

    <script>
      var map = L.map('map').setView([39.74739, -105], 13)

      L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1,
      }).addTo(map)

      var baseballIcon = L.icon({
        iconUrl: 'https://leafletjs.cn/examples/geojson/baseball-marker.png',
        iconSize: [32, 37],
        iconAnchor: [16, 37],
        popupAnchor: [0, -28],
      })

      function onEachFeature(feature, layer) {
        var popupContent = '<p>I started out as a GeoJSON ' + feature.geometry.type + ", but now I'm a Leaflet vector!</p>"

        if (feature.properties && feature.properties.popupContent) {
          popupContent += feature.properties.popupContent
        }

        layer.bindPopup(popupContent)
      }

      L.geoJSON([bicycleRental, campus], {
        // 为特征设置样式
        style: function (feature) {
          return feature.properties && feature.properties.style
        },

        // 在添加到 GeoJSON 图层之前，对每个 Feature 进行调用
        onEachFeature: onEachFeature,

        pointToLayer: function (feature, latlng) {
          // 返回一个 ILayer 的实例，可能是 Marker 或者 CircleMarker
          return L.circleMarker(latlng, {
            radius: 8,
            fillColor: '#ff7800',
            color: '#000',
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8,
          })
        },
      }).addTo(map)

      L.geoJSON(freeBus, {
        // 用于控制 GeoJSON feature 的可见性，false 表示不可见
        filter: function (feature, layer) {
          if (feature.properties) {
            return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true
          }
          return false
        },

        onEachFeature: onEachFeature,
      }).addTo(map)

      var coorsLayer = L.geoJSON(coorsField, {
        pointToLayer: function (feature, latlng) {
          // 返回一个自定义图标的标记
          return L.marker(latlng, { icon: baseballIcon })
        },

        onEachFeature: onEachFeature,
      }).addTo(map)
    </script>
  </body>
</html>
